<!-- ASSESSMENT TOOL -->
<div id="clientloadright" class="main-wrapper">
  <div class="col-lg-9">
    <div class="tabbable tabs-with-bg">
      <ul class="nav nav-tabs nav-justified">
        <li class="active">
          <a id="#gather-top-tab" href="#gather" data-toggle="tab" aria-expanded="true">Gather</a>
        </li>
        <li class="">
          <a id="assessmentTopTab" href="#assess" data-toggle="tab" aria-expanded="false">Assess</a>
        </li>
        <li class="">
          <a id="complyTopTab" href="#comply" data-toggle="tab" aria-expanded="false">Comply</a>
        </li>
      </ul>
    </div>
    <div class="tab-content">
    <!-- HIDDEN FORM -->
    <section id="gather" class="tab-pane big-box fade active in">
        <div style="display:inline-block;vertical-align:top;margin:12px;width:30%"><h1>Current</h1>
          <%= form_for @client, url: client_path, remote: true, html: {class: "content-form", id: "updateClient"} do |f| %>
          <!-- FORM-->
          <div class="field-container form-group hidden">
            <%= f.text_field :user_id, id: "client-provider-input", type: "integer", require: true, class: "inin form-control material input-lg", required: true %>
            <%= f.label :name, "Provider ID", class: "inlabel" %>
          </div>
          <div class="field-container form-group hidden">
            <%= f.text_field :bmi, id: "client-bmi-input", require: true, class: "inin form-control material input-lg" %>
            <%= f.label :bmi, class: "inlabel" %>
          </div>
          <div class="field-container form-group hidden">
            <%= f.number_field :ibw, id: "client-ibw-input", require: true, class: "inin form-control material input-lg"%>
            <%= f.label :ibw, class: "inlabel" %>
          </div>
          <div class="field-container form-group hidden">
            <%= f.number_field :calreq, id: "client-cal-input", require: true, class: "inin form-control material input-lg"%>
            <%= f.label :calreq, class: "inlabel" %>
          </div>
          <div class="field-container form-group hidden">
            <%= f.number_field :proreq, id: "client-pro-input", require: true, class: "inin form-control material input-lg"%>
            <%= f.label :proreq, class: "inlabel" %>
          </div>
          <div class="field-container form-group hidden">
            <%= f.number_field :flreq, id: "client-fl-input", require: true, class: "inin form-control material input-lg", id: "hiddenflreq"%>
            <%= f.label :flreq, class: "inlabel" %>
          </div>
          <!-- CURRENT CLIENT STATUS FORM -->
          <div class="field-container form-group">
            <%= f.text_field :allergies, id: "client-allergies-input", require: true, class: "inin form-control material input-lg", required: true %>
            <%= f.label :allergies, class: "inlabel" %>
          </div>
          <div class="field-container form-group">
            <%= f.text_field :cdiet, id:"client-currentdiet-input", require: true, class: "inin form-control material input-lg", required: true, onchange: "diet()"%>
            <%= f.label :cdiet, 'Current Diet', class: "inlabel" %>
          </div>
          <div class="field-container form-group">
            <%= f.text_field :dx, id:"client-dx-input", require: true, class: "inin form-control material input-lg", required: true, onchange: "dx()" %>
            <%= f.label :dx, id: 'dxlabel', class: "inlabel seleclabel" %>
          </div>
          <div class="field-container form-group">
            <%= f.number_field :cbw, id:"client-cbw-input", require: true, class: "inin form-control material input-lg history-weight", required: true, onchange: "cal(), getBmi(), pro(), fl()" %>
            <%= f.label :cbw, 'Current Body Weight',class: "inlabel" %>
          </div>
          <div class="form-inline">
            <div class="field-container form-group" style="width:20%">
              <%= f.number_field :ht, id:"client-height-input", require: true, class: "inin form-control material input-lg", style: "width:100%", required: true, onchange: "getBmi(), getIbw()" %>
              <%= f.label :ht, 'Height', class: "inlabel" %>
            </div>
            <div class="field-container form-group" style="width:35%">
              <%= f.text_field :date0, id:"client-date0-input", require: true, class: "inin form-control material input-lg date history-date", style: "width:100%", required: true %>
              <%= f.label :date0, 'Date', class: "inlabel" %>
            </div>
          </div>
        </div>
        <!-- CLIENT WEIGHT HISTORY FORM -->
        <div style="display:inline-block;margin:12px;vertical-align:top;width:30%">
          <h1>Weight History</h1>
          <div class="form-inline">
            <div class="field-container form-group" style="width:20%;margin:12px">
              <%= f.number_field :thirtywt, id: "client-weight-oneMonth-ago-input", require: true, class: "inin form-control material input-lg history-weight", style: "width:100%", required: true, onchange: "", value: "#{@client.thirtywt ? @client.thirtywt : '0'}" %>
              <%= f.label :thirtywt, "-30", class: "inlabel" %>
            </div>
            <div class="field-container form-group" style="width:35%">
              <%= f.text_field :date1, id: "client-date1-input", require: true, class: "inin form-control material input-lg date history-date", style:"width:150%", required: true, onchange: "" %>
              <%= f.label :date1, 'Date', class: "inlabel" %>
            </div>
          </div>
          <!-- SECOND FORM -->
          <div class="form-inline">
            <div class="field-container form-group" style="width:20%;margin:12px">
              <%= f.number_field :ninetywt, id: "client-weight-threeMonths-ago-input", require: true, class: "inin form-control material input-lg history-weight", style: "width:100%", required: true, onchange: "",value: "#{@client.ninetywt ? @client.ninetywt.to_s : '0'}" %>
              <%= f.label :ninetywt, "-90" , class: "inlabel" %>
            </div>
            <div class="field-container form-group" style="width:35%">
              <%= f.text_field :date2, id: "client-date2-input",  require: true, class: "inin form-control material input-lg date history-date", style:"width:150%", required: true, onchange: "" %>
              <%= f.label :date2, 'Date', class: "inlabel" %>
            </div>
          </div>
          <div class="form-inline">
            <div class="field-container form-group" style="width:20%;margin:12px">
              <%= f.number_field :oneeightywt, id: "client-weight-sixMonths-ago-input", require: true, class: "inin form-control material input-lg history-weight", style: "width:100%", required: true, onchange: "", value: "#{@client.oneeightywt ? @client.oneeightywt : '0'}" %>
              <%= f.label :oneeightywt, "-180" , class: "inlabel" %>
            </div>
            <div class="field-container form-group" style="width:35%">
              <%= f.text_field :date3, id: "client-date3-input", require: true, class: "inin form-control material input-lg date history-date", style:"width:150%", required: true, onchange: "" %>
              <%= f.label :date3, 'Date', class: "inlabel" %>
            </div>
          </div>
        </div>
        <!-- THIRD FORM - LABS FORM -->
        <div style="display:inline-block;margin:12px;vertical-align:top;width:30%">
          <div style="display:inline-block"><h1 style="display:inline-block">Labs</h1></div>
          <div class="trigger" data-izimodal-open="labsform" cursor="pointer" style="display: inline-block">
            <a class="fa-stack fa-1x icon-back" style="margin-bottom: 8px">
              <i class="fa fa-circle fa-stack-2x blue"></i>
            <i class="fa fa-plus fa-stack-1x fa-inverse"></i></a>
          </div>
          <!-- PRESSURE ULCERS -->
          <div class="form-inline" style="width: 80%;padding: 10px 10px 30px 0">
            <h4><strong>Pressure Ulcer</strong></h4>
            <select id="pressureUlcer" class="cs-select cs-skin-border" onclick="">
              <option value="" selected>No Pressure Ulcer</option>
              <option value="1">Stage 1</option>
              <option value="2" >Stage 2</option>
              <option value="3">Stage 3</option>
              <option value="4">Stage 4</option>
            </select>
          </div>
          <!-- Trigger the modal (alert) with a button -->
          <div>
            <%= f.submit 'Next', class: "actions btn btn-lg", id: "updatebut", style: "background: #374B89; color: #FFFFFF;"%>
          </div>
          <% end %>
        </div>
    </section>
    <!-- ASSEESS TAB -->
    <section id="assess" class="tab-pane big-box fade in">
        <div class="jumbotron">
          <!-- ASSESSMENT TYPE -->
          <div id="assessmentType" class="field-container form-group" style="width: 70%;display: inline-block; margin 0px;">
            <%= select_tag "Type", "<option value='full Assessment' selected='selected'>Full Assessment - #{Time.now.strftime('%b %d, %Y')}</option><option value='quaterly Assessment'>Quaterly Assessment - #{Time.now.strftime('%b %d, %Y')}</option><option value='initialAssessment'>Initial Assessment - #{Time.now.strftime('%b %d, %Y')}</option>".html_safe, class: "cs-select cs-skin-underline", style: "width: 120%" %>
          </div>
          <br>
          <!-- ASSESSMENT -->
          <div id="assessment" class="container">
            <div id="assessment-container">
              <p id="note-editor-3" class="w-amount" data-toggle="tooltip" data-placement="top" title="Click to edit...">
                <span id='agespan' class='w-amount'>- -</span>y/o <span>Client</span> on <span id='cdietspan' class='w-amount'>- - </span> Diet to manage Dx of <span id="dxspan" class='w-amount'>- -</span>. Average intake: <span id='intakefromspan', class='w-amount'>- -</span>  <span id='intaketospan', class='w-amount'></span>with <span>assistance needed.</span> CBW of <span id="cbwspan" class='w-amount'>- -</span> lbs puts <span>Client</span> at BMI of <span id="bmispan" class="w-amount">- -</span> kg/m2 and at <span id="percentibwfassess" class="w-amount">- -</span>% of IBW. <span id="wthistshow"class="w-amount"> Weight history shows</span> <span id="weight-difference-message"></span>. Abnormal lab values noted, MD/NP aware. <span>Pressure ulcer</span>. <span>Client</span> under <span>MED</span>increasing significantly the risk for <span>N/V/D</span>. Will continue to monitor all nutritional values and make changes as PRN.
              </p>
            </div>
            <button id="reset-assessment-btn" type="button" class="btn btn-lg" >Reset</button>
            <div id="runAndSaveBtns" style="float: right">
              <button id="run-assessment-btn" type="button" class="btn btn-danger btn-lg">Run</button>
              <button id="comply-btn" class="btn btn-primary btn-lg">Comply</button>
            </div>
            <hr>
            <!-- DIAGNOSIS -->
            <div>
              <h1>Diagnosis</h1>
              <p id="diagnosis-adime" class="diagnosis-adime"></p>
            </div>
            <!-- INTERVENTION -->
            <hr>
            <div>
              <h1>Intervention </h1>
              <p id="intervention-adime" class="intervention-adime"></p>
            </div>
            <!-- MONITORING EVALUATION -->
            <hr>
            <div>
              <h1>Monitoring/Evaluation</h1>
              <p id="monitoring-and-evaluation-adime">Will continue to monitor and make changes as PRN.</p>
            </div>
          </div>
        </div>
    </section>
    
    <!-- COMPLY TAB -->
    <section id="comply" class="tab-pane big-box fade in">
        <!-- COMPLY-->
          <div class="jumbotron">
            <div class="container">
              <h2 style="font-weight: 200px">Add New Progress Note</h2>
              <%= form_for @progressnote, url: client_progressnotes_path(client_id: @client.id), remote: true do |f| %><%= f.hidden_field :client_id, value: "#{@client.id}"%>
              <div style="margin-left: 1em;height: 122px; width: 100%">
                <div id="pNoteDivInput" >
                  <%= f.text_area :pnote, style: "font-size: 20px;width: 100%; height: 122px", placeholder:"e.g. Appetite is improving and has opted for a lower sodium diet since last visit" %>
                </div>
              </div>
              <% end %>
              <%= form_for @monitoringnote, url: client_monitoringnotes_path(client_id: @client.id), remote: true do |f| %>
              <h2>Add New Monitoring Note</h2>
              <div style="margin-left: 1em;height: 122px; width: 100%">
                <div id="sumemernote" >
                  <%= f.text_area :mnote, style:"font-size: 20px;width: 100%; height: 122px", placeholder: "e.g. Sodium levels have decreased: 120mL/dL (12/12/12) vs 140 mL/dL (11/11/11)..." %>
                <%= f.text_area :client_id, value: "#{@client.id}", readonly: true, style: "display: none" %></div>
              </div>
              <% end %>
              <%= form_for @nextevaluationnote, url: client_nextevaluationnotes_path(client_id: @client.id), remote: true do |f| %>
              <h2 style="display: inline-block">Next Evaluation on</h2>
              <div class="" style="display: inline-block">
                <!-- V.LOG 1482 -->
                <div style=""><%= f.text_field :nnote_date, class: "summernote3 date", placeholder: 'mm/dd/yyyy', style: "border: 0; padding: 0 0 0 0.2em; font-size: 34px" %>
                </div>
              </div>
              <div style="margin-left: 1em;height: 122px; width: 100%">
                <div id="summernote" >
                  <%= f.text_area :nnote, style:"font-size: 20px;width: 100%; height: 122px", placeholder: "e.g. BMI and %IBW should have normalized. Sodium levels should be WNL..." %>
                  <%= f.text_area :client_id, value: "#{@client.id}", readonly: true, style: "display: none" %>
                <%= f.text_area :user_id, value: "#{@current_user.id}", readonly: true, style: "display: none" %></div>
              </div>
              <% end %>
              <div id="notesAndNextEvaluationButtons" style="margin-top: 2em;float: right">
                <!-- EVENTLISTENER THAT SUBMITS ALL FORMS ONCLICK -->
                <button id="done-btn" class="btn btn-success" type="button"  data-toggle="tooltip" data-placement="top" title="Will save assement and all notes to client's history database">DONE</button>
              </div>
            </div></p>
          </div>
    </section>
  </div>
    <!-- LABS FORM MODAL FOR LABS#NEW-->
    <div id="labsform" class="iziModal" role="dialog">
        <!-- Modal content-->
        <div class="content-box box-shadow big-box">
          <%= form_for @labs, url: client_labs_path(client_id: @client.id), remote: true do |f| %>
          <%= f.text_area :client_id, value: "#{@client.id}", readonly: true, style: "display: none" %>
          <div style="">
            <div style="display: inline-block; widht: 100%"><h1 style="font-size: 3em" >Labs - </h1></div>
            <div style="display: inline-block">
              <%= f.label :date, "Date", style: "margin-bottom: 0px;left: 9px;position: relative;top: 3px;"  %>
              <%= f.text_field :date, class: "summernote4 date", style: "border: 0; padding: 0 0 0 0.2em; font-size: 34px", placeholder: 'mm/dd/yyy', autofocus: false %>
            </div>
          </div>
          <div class="table-responsive">
            <table id="datatable" class="table">
              <thead>
                <tr>
                  <th>Marker</th>
                  <th>Values</th>
                  <th>Ranges</th>
                </tr>
              </thead>
              <tbody>
                <% @labs.attributes.each_with_index do |lab, idx| %>
                <% next if ["id", "client_id", "date", "created_at", "updated_at"].include?(lab[0]) %>
                <tr class=<%= idx.odd? ? "active" : "" %>>
                  <th><%= lab[0].to_sym %></th>
                  <th><%=f.text_field lab[0].to_sym %></th>
                  <th style="font-size: 16px;"><%= Lab.ranges[lab[0].to_sym][:normal_adults][@client.gender.to_sym].join('').gsub("..", " - ") + " " + Lab.ranges[lab[0].to_sym][:metric]%></th>
                </tr>
                <% end %>
              </tbody>
            </table>
          </div>
          <%= f.submit "Add Labs", class:"btn btn-info", style: "float: right" %>
          <% end %>
          <br><br>
        </div>
        
    </div>
    <!-- WEIGHT HISTORY GRAPH -->
    <div class="col-lg-4 content-box"style="">
      <div class="content-title big-box i-block">
        <h4 class="zero-m">Weight History</h4>
        <div class="content-tools i-block pull-right">
          <span class="text-uppercase pull-right">Plot data</span>
          <a id="expanding", class="repeat-btn", onclick="setTimeout(window.r500)">
            <i class="fa fa-repeat"></i>
          </a>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="big-box box-chart">
        <div class="chartjs-container">
          <canvas id="chart-line"></canvas>
        </div>
      </div>
    </div>
    <!-- INTAKE-->
    <div id="prueba"class="col-lg-4 content-box big-box box-shadow">
      <h4><strong>Intake</strong></h4>
      <div id='parentofselect' class="form-inline" onclick="intake()" style="width: 80%">
        <select id="client_intakefrom" class="cs-select cs-skin-border" onclick="intake()" size="4">
          <option value="" disabled>From</option>
          <option value="100%">100%</option>
          <option value="75%">75%</option>
          <option value="50%">50%</option>
          <option value="25%">25%</option>
          <option value="0%">0%</option>
          <option value="1">Refuse</option>
        </select>
        <select id="client_intaketo" class="cs-select cs-skin-border" onclick="intake()" size="4">
          <option value="" disabled>To</option>
          <option value="100%">100%</option>
          <option value="75%">75%</option>
          <option value="50%">50%</option>
          <option value="25%">25%</option>
          <option value="0%">0%</option>
        </select>
        <h4><strong>Assistance Needed</strong></h4>
        <div id='' class="form-inline" onclick="intake()">
          <select id="client_intaketo" class="cs-select cs-skin-border" onclick="intake()" size="3">
            <option value="" disabled>Assistance Needed</option>
            <option value="3">Total Dependece</option>
            <option value="2">Limited Assistance</option>
            <option value="1">Setup Supervision</option>
            <option value="0">Feeds Self</option>
          </select>
        </div>
      </div>
    </div>
    <div id="modal-alert" class="iziModal" data-iziModal-group="alert" data-iziModal-loop></div>
    <div id="modal-alert2" class="iziModal" data-iziModal-group="alert" data-iziModal-loop></div>
    <div id="modal-alert3" class="iziModal" data-iziModal-group="alert" data-iziModal-loop></div>
    <div id="modal-alert4" class="iziModal" data-iziModal-group="alert" data-iziModal-loop></div>
  </div>
</div>